<template>
	<view class="orderlist">
		<view class="orderlist-page" v-for="(item,index) in orderList" :key="index">
			<view class="orderlist-page-item">
				<view class="orderlist-page-item-text">订单号</view>
				<view class="orderlist-page-item-num">{{item.order_no}}</view>
			</view>
			<view class="orderlist-page-item">
				<view class="orderlist-page-item-text">金额</view>
				<view class="orderlist-page-item-num"><strong class="orderlist-page-item-num-money red">{{item.money}}</strong></view>
			</view>
			<view class="orderlist-page-item">
				<view class="orderlist-page-item-text">账单状态</view>
				<view class="orderlist-page-item-num red">{{item.state_text}}</view>
			</view>
			<view class="orderlist-page-item">
				<view class="orderlist-page-item-text">支付状态</view>
				<view class="orderlist-page-item-num">{{item.pay_status_text}}</view>
			</view>
			<view class="orderlist-page-line"></view>
			<view class="orderlist-page-item">
				<view class="orderlist-page-item-text">创建时间</view>
				<view class="orderlist-page-item-num">{{item.create_time}}</view>
			</view>
			<view class="orderlist-page-item">
				<view class="orderlist-page-item-text">还款时间</view>
				<view class="orderlist-page-item-num">2020-07-20 00:40:25</view>
			</view>
		</view>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="transShow"/>
		<uni-transition :duration="500" :mode-class="['slide-bottom','fade']" :styles="transfromClass" :show="transShow">
			<view class="awardlist-record">
				<view @tap="showToggle" v-if="item.pay_status == 0">
					<close class="close" size="32" color="#535353" ></close>
				</view>
				<view class="title">支付方式</view>
				<view class="pay-box">
				    <view class="pay-item" @tap="choosePay(item.type)" v-for="(item,index) in payList" :key="index">
						<view class="item-title">
							<image :src="item.icon_text"></image>
							<view class="item-text">{{item.name}}</view>
						</view>
						<view class="item-pay-icon">
							<image :src="paytype == item.type ? '../../static/icons/pay-select-act.png' : '../../static/icons/pay-select.png'"></image>
						</view>
				    </view>
				</view>
				<view class="btn" :class="{gay:!paytype}" @tap="pushOrder">确认</view>
			</view>
		</uni-transition>
		
		<mix-load-more :status="loadMoreStatus"></mix-load-more>
		<block v-if="orderList.length >0 ">
			<view class="payBtn" @tap="rePay()">立即还款</view>
			<view class="payBtn-bg"></view>
		</block>
	</view>
	
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				orderList:[],
				modeClass:['fade'],
				transShow:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				loadMoreStatus:1,
				page:1,
				total_pages:1,
				payList:[],
				paytype:''
			};
		},
		methods: {
			getData(type){
				let that = this
				if(that.page <= that.total_pages){
					jewel.get('credit_bill/get_list',{page:that.page},true,function(res){
						if(type=='loadMore'){
							that.orderList = that.orderList.concat(res.data.data)
						}else{
							that.orderList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages <= 1 ? 2:0
						}
					})
				}else{
					that.loadMoreStatus = 2
				}
			},
			showToggle(){
				this.transShow = false
			},
			choosePay(e){
				this.paytype = e
			},
			rePay(){
				this.transShow = true
			},
			pushOrder(){
				let that = this
				jewel.post('credit_bill/pay',{id:4,paytype:that.paytype},true,function(res){
					jewel.showToast(res.data.msg,res.data.code==0?1500:3000)
				})
			}
		},
		onLoad() {
			let that = this
			that.getData()
			jewel.post('Payment/payList',{repay:1},true,function(res){
				that.payList = res.data.data
			})
		},
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		}
	};
</script>

<style lang="scss" scoped>
	page{
		background-color: #f3f3f3;
	}
	.orderlist{
		background-color: #f3f3f3;
		padding-top: 35rpx;
		&-page{
			width: 708rpx;
			background-color: #FFFFFF;
			border-radius: 10px;
			margin: 0 auto;
			padding: 20rpx 25rpx;
			box-sizing: border-box;
			margin-bottom: 35rpx;
			&-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50rpx;
				&-text{
					color: #666666;
					font-size: 28rpx;
				}
				&-num{
					font-size: 30rpx;
					&-money{
						font-size: 36rpx;
					}
				}
			}
			&-line{
				background-color: #f5f5f5;
				width: 100%;
				height: 1px;
				margin: 10rpx 0;
			}
			.red{
				color: #d71511;
			}
		}
		
	}
	.awardlist-record{
		z-index: 10;
		background-color: #FFFFFF;
		border-radius: 15px 15px 0 0;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		left: 0;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		text{
			flex: 1;
			text-align: center;
			color: #252525;
			font-size: 36rpx;
		}
		.close{
			position: absolute;
			right: 26rpx;
			top: 30rpx;
			z-index: 11;
		}
		.title{
			color: #252525;
			text-align: center;
			font-size: 38rpx;
			line-height: 122rpx;
		}
		.nav{
			display: flex;
			align-items: center;
			height: 76rpx;
			border-bottom: 1px solid #cccaca;
		}
		.li{
			display: flex;
			align-items: center;
			height: 66rpx;
			&:nth-child(even){
				background-color: #f8c7e3;
			}
			text{
				font-size: 32rpx;
			}
		}
		.list{
			max-height: 660rpx;
		}
		.btn{
			width: 636rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 50px;
			margin: 0 auto;
			text-align: center;
			font-size: 40rpx;
			color: #FFFFFF;
			background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
			margin-top: 36rpx;
		}
		&.show{
			transform: translateY(0) !important;
			bottom: 0;
		}
	}	
	.pay-box{
		.pay-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			.item-title{
				display: flex;
				align-items: center;
				image{
					width: 74rpx;
					height: 74rpx;
				}
				.item-text{
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			.item-pay-icon{
				image{
					width: 43rpx;
					height: 43rpx;
					display: block;
				}
			}
		}
	}
	.payBtn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		font-size: 38rpx;
		line-height: 108rpx;
		background-color: #d71511;
		&-bg{
			width: 100%;
			height: 108rpx;
		}
	}
</style>
